<template>
  <el-dialog title="文件导入" :visible.sync="visible" center width="720px">
    <el-container>
      <el-main>
        <div :style="styleDiv" style="width: 30%;float: left">
          <el-steps direction="vertical" :active="active">
            <el-step title="第一步" description="点击下载链接下载EXCEL模板"></el-step>
            <el-step title="第二步" description="将模板文件拖拽或点击上传到右侧文件上传区域"></el-step>
            <el-step title="第三步" description="点击右侧上传按钮完成上传"></el-step>
          </el-steps>
        </div>
        <div :style="styleDiv" style="width: 70%;float: left">
          <el-row style="text-align: center">
            <el-button type="primary" plain @click="downExcel">模板文件下载链接，<em style="color: #b11ebc">点击下载</em></el-button>
          </el-row>
          <el-row style="text-align: center;padding-top: 50px;">
            <el-upload
              v-loading="loading"
              element-loading-text="拼命上传中"
              class="upload-demo"
              ref="upload"
              drag
              :limit="1"
              accept=".xlsx, .xls"
              :auto-upload="false"
              :on-change="changeUpload"
              :on-progress="uploadProgress"
              :on-success="uploadSuccess"
              :on-error="uploadError"
              action="/service/uploadExcel/">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
          </el-row>
          <el-row style="text-align: center;padding-top: 30px">
            <el-button :loading="loading" plain type="primary" :disabled="flag" @click="submitUpload">
              点击上传
            </el-button>
          </el-row>
        </div>
      </el-main>
     <!-- <el-footer style="height: 35.6px;padding: 0;">
        <el-row style="text-align: right">
          <el-button type="primary" size="small" plain @click="closeUploadModal">关闭</el-button>
        </el-row>
      </el-footer>-->
    </el-container>
  </el-dialog>
</template>

<script>
  export default {
    name: 'trackUploadExcel',
    props: ['uploadVisible'],
    watch: {
      uploadVisible(val) {
        this.visible = val;
      },
      visible(val) {
        if (!val) {
          this.active = 1;
          this.styleDiv = 'height: 350px';
          this.$refs.upload.clearFiles();
        }
        this.$emit('update:uploadVisible', val);
      },
      fileList(val) {
        // console.log(val)
        if (val.length > 0) {
          this.flag = false;
        } else {
          this.active = 2;
          this.styleDiv = 'height: 350px';
          this.flag = true;
        }
      }
    },
    data() {
      return {
        styleDiv: 'height: 350px',
        active: 1,
        flag: true,
        loading: false,
        visible: false,
        fileList: []
      }
    },
    methods: {
      changeUpload() {
        this.fileList = this.$refs.upload.uploadFiles;
        this.styleDiv = 'height: 380px';
        this.active = 3;
      },
      submitUpload() {
        this.loading = true;
        this.$refs.upload.submit();
      },
      uploadSuccess() {
        this.loading = false;
        this.$message({
          type: 'success',
          message: `上传成功`
        });
        this.$refs.upload.clearFiles();
      },
      uploadProgress() {
        this.loading = true;
      },
      uploadError() {
        this.loading = false;
        this.$message({
          type: 'error',
          message: `上传失败,请重新上传`
        });
        this.$refs.upload.clearFiles();
      },
      downExcel() {
        let url='/service/downExcel';
        window.open(url)
        this.active = 2;
      },
      closeUploadModal() {
        this.visible = false;
      }
    }
  };
</script>

<style scoped>
.upload-demo{
  text-align: center;
}

</style>
